<template>
   <!--最外层盒子 -->
   <div class="wrap">
      <!-- 左侧拖拽栏 -->
      <div class="drag">
         <div v-for="item in data.list" :key="item.index">
            <div draggable="true" @dragstart="drag($event)" class="item">{{ item.title }}</div>
         </div>
      </div>
      <!-- 中间保存栏 -->
      <div class="save" @drop="drop($event, 'item')" @dragover="allowDrop($event)">
         
      </div>
      <!-- 右侧数据栏 -->
      <div class="tab-wrap"></div>
   </div>
</template>

<script setup >
import { ref, reactive } from 'vue';
const data = reactive({
   dom: '',
   list: [
      { title: '1' },
      { title: '2' },
      { title: '3' },
   ]
})

// 拖拽
const drag = (ev, id) => {
   console.log('11111',ev);
   // console.log("拖动", id);
   data.dom = ev.currentTarget.cloneNode(true);
   // console.log(data.dom);
};
// 允许放下拖拽
const allowDrop = (ev) => {
   ev.preventDefault();
   // console.log(ev, 'eee');
};
// 放下事件
const drop = (ev, item) => {
   // console.log("放下", item);
   // console.log(ev);
   ev.preventDefault();
   let treeNode = ev.target;
   if (treeNode) {
      treeNode.appendChild(data.dom);
   }
};
</script>

<style scoped lang='scss'>
.wrap {
   display: flex;

   .drag {
      width: 300px;
      height: 400px;
      background-color: aquamarine;
   }

   .item {
      width: 50px;
      height: 50px;
      background-color: blue;
   }

   .save {
      width: 300px;
      height: 400px;
      background-color: antiquewhite;
   }

   .tab-wrap {
      width: 300px;
      height: 400px;
      background-color: pink;

   }
}
</style>
